<template>
    <SysQueryFrom>
        <template v-slot:form_info>
            <El-form :model="formObj" class="form_content" ref="UnitsFormRef">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item label="单位信息：" prop="name">
                            <el-input
                                v-model="formObj.name"
                                placeholder="请输入单位名称"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="单位状态：" prop="status">
                            <el-select
                                v-model="formObj.status"
                                placeholder="请选择单位状态"
                            >
                                <el-option
                                    v-for="item in statusList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </El-form>
            <slot name="form_other"></slot>
        </template>

        <template v-slot:form_btn>
            <SysQueryBtn @btnClick="btnClick"></SysQueryBtn>
        </template>
    </SysQueryFrom>
</template>

<script setup lang="ts">
const UnitsFormRef = ref();
const emit = defineEmits(["fromQuery", "reset"]);

const formObj = reactive({
    name: "",
    status: "",
});
const statusList = reactive([
    {
        label: "禁用",
        value: 0,
    },
    {
        label: "正常",
        value: 1,
    },
]);

//查询按钮点击
function btnClick(item: any) {
    if (item.event === "queryClick") {
        querTableList();
        return;
    }
    resetClick();
}

// 查询
function querTableList() {
    // UnitsFormRef.value.validate(async (isValid: boolean) => {
    emit("fromQuery", formObj);
    // });
}

// 重置按钮点击
function resetClick() {
    UnitsFormRef.value.resetFields();
    emit("reset");
}

onBeforeMount(async () => {
    await querTableList();
});

defineExpose({ querTableList, formObj });
</script>

<style lang="scss" scoped>
.form_content {
    width: 80%;
    :deep(.el-form-item) {
        align-items: center;
        margin-bottom: 21px;
        .el-input,
        .el-select {
            height: 40px;
            width: 230px;
            .el-select__wrapper {
                height: 40px;
                line-height: 40px;
            }
        }
    }
}
</style>
